<template>
	<view class="index-component" v-show="show">
		<view class="box">
			<image src="../../static/imgs/logo.png" mode="heightFix"></image>
			<view class="btns">
				<text @click="left()">取消授权</text>
				<text @click="right()">授权登录</text>
			</view>
		</view>
	</view>
</template>
<style scoped lang="scss">
.index-component{
	.box{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background-color: #FFFFFF;
		width: 80%;
		border-radius: 20rpx;
		.btns{
			display: flex;
			flex-direction: row;
			text{
				text-align: center;
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
			}
			text:nth-child(1){
				color: #4772ff;
				box-sizing: border-box;
				border: 1rpx solid #4772ff;
				background-color: #FFFFFF;
				border-radius: 0 0 0 20rpx;
			}
			text:nth-child(2){
				color: #FFFFFF;
				box-sizing: border-box;
				border: 1rpx solid #4772ff;
				background-color: #4772ff;
				border-radius: 0 0 20rpx 0;
			}
		}
		image{
			width: 160rpx;
			height: 300rpx;
			display: block;
			margin: 30rpx auto;
		}
	}
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 9999999;
}
</style>
<script>
export default {
	props:{
		show:{
			type: Boolean,
			default:false
		}
	},
	mounted() {
		  
	},
	methods: {
		left(){this.$emit('clickLeft')},
		right(){this.$emit('clickRight')},
	}
}
</script>

